<template>
  <div class='container'>
    <el-container>
      <!-- 头部 -->
      <el-header>欢迎使用问卷调查系统</el-header>
      <!-- 主体 -->
      <el-main>
        <div class='row'
             v-for="(item,index) in survey.survey_templates"
             :key="index">
          <h4>{{item.name}}</h4>
          <hr>
          <el-form ref="surveyRef"
                   :model="item"
                   label-width="80px"
                   label-position="top">
            <el-form-item v-for="(item1,index1) in item.question"
                          :key="index1"
                          :label="item1.title">
              <el-input type='textarea'
                        v-if="item1.survey_type=='suggest'"
                        v-model="item1.value"
                        size="small"></el-input>
              <el-radio-group v-else
                              v-model="item1.value">
                <el-radio v-for="(item2,index2) in item1.choices"
                          :key="index2"
                          :label="item2.title"></el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
        <el-button type="primary"
                   @click="onSubmit">立即创建</el-button>
      </el-main>

      <!-- 尾部 -->
      <el-footer>Copyright-2021</el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  data () {
    return {
      survey: {

      }
    }
  },
  mounted () {
    this.initSurveyTemplate()
  },
  computed: {
    userId () {
      return this.$route.params.userId
    }
  },
  methods: {
    // 获取数据
    async initSurveyTemplate () {
      const { data: res } = await this.$http.get('/api/surveys/10')
      this.survey = res
    },
    // 提交表单
    onSubmit () {
      console.log(this.survey)
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  width: 50%;
  margin: 50px auto;
}
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.el-table {
  width: 100%;
}
</style>
